<template>
    <div id="app">
        <!-- <img src="./assets/logo.png">  -->
        <header-bar ref="header" :style="[headerStyles]"></header-bar>
        <router-view></router-view>
        <footer-bar></footer-bar>
    </div>
</template>

<script>
import { HeaderBar, FooterBar } from './components/Layout/index'

export default {
    name: 'app',
    components: {
        HeaderBar,
        FooterBar
    },
    data () {
        return {
            headerStyles: {}
        }
    },
    methods: {
        /**
         * 页面滚动
         */
        handleScroll () {
            let opacity = (50 - document.body.scrollTop) / 50
            if (opacity > 0) {
                this.headerStyles = {
                    opacity: opacity
                }
            } else {
                this.headerStyles.opacity = 0
            }
        }
    },
    mounted () {
        window.addEventListener('scroll', this.handleScroll)
    }
}
</script>

<style lang="scss">
@import "./styles/scss/main.scss";
</style>
